import { createApp } from 'vue'
import VerificationCode from './VerificationCode.vue';

export function createVerificationCode() {
    // 这里使用不同的选择器来找到第二个页面的容器
    const container = document.querySelector('.dYWRoF > .bKkbVp')||document.querySelector(".verify-code-container")
    console.log(container, 'container111111111');
    
    if (!container) return;
    const originalInputs = container.querySelectorAll('input:not(.my-custom-code)');
    originalInputs.forEach(input => {
        input.style.visibility = 'hidden';
        // input.style.position = 'absolute';
        // input.style.left = '-9999px';
    });
    // 避免重复插入
    if (container.querySelector(".my-verification-overlay")) return;

    const overlay = document.createElement('div');
    overlay.setAttribute('class', 'my-verification-overlay');
    overlay.setAttribute('style', 'position: absolute;\n' +
        ' left: 0;\n' +
        ' top: 0;\n' +
        ' width: 100%;\n' +
        ' height: 100%;');

    const appContainer = document.createElement('div');
    const app = createApp(VerificationCode);
    app.mount(appContainer);

    container.style.position = 'relative';
    overlay.appendChild(appContainer);
    container.appendChild(overlay);

    console.log('Second App mounted');
}